<script setup lang="ts">
import { Line } from '@antv/g2plot'
import { ref, onMounted } from 'vue'
import { lineData } from './data'

const myChart = ref(null)

onMounted(() => {
  if (!myChart.value) return
  const line = new Line(myChart.value, {
    data: lineData,
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    xAxis: {
      // type: 'timeCat',
      tickCount: 5
    }
  })

  line.render()
})

// import { ref, onMounted } from 'vue'
// import { Line } from '@antv/g2plot'
// import { lineData } from './data'
// const chart = ref(null)

// onMounted(() => {
//   if (!chart.value) return
//   const line = new Line(chart.value, {
//     data: lineData,
//     padding: 'auto',
//     xField: 'Date',
//     yField: 'scales',
//     xAxis: {
//       // type: 'timeCat',
//       tickCount: 5
//     }
//   })

//   line.render()
// })
</script>
<template>
  <div ref="myChart" style="width: 500px; height: 400px"></div>
</template>
